<template>
  <div class="exam-container">
    <!-- 顶部导航栏 -->
    <header class="exam-header">
      <div class="header-content">
        <h1 class="exam-title">{{ examData.name }}</h1>
        <div class="timer-badge">
          <el-icon>
            <timer />
          </el-icon>
          <span>{{ formattedTime }}</span>
        </div>
      </div>

      <div class="exam-progress">
        <div class="progress-info">
          <span>已完成 {{ completedCount }}/{{ examData.questions.length }} 题</span>
          <el-progress :percentage="progressPercentage" :stroke-width="10" :show-text="false" :color="progressColor" />
        </div>
        <el-button type="danger" class="submit-exam-btn" @click="handleSubmit" :disabled="completedCount === 0">
          交卷
        </el-button>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧题目列表 -->
      <aside class="question-sidebar">
        <div class="sidebar-header">
          <h3>题目导航</h3>
          <div class="sidebar-legend">
            <span class="legend-item">
              <div class="legend-color current"></div>当前题目
            </span>
            <span class="legend-item">
              <div class="legend-color answered"></div>已答题
            </span>
            <span class="legend-item">
              <div class="legend-color unanswered"></div>未答题
            </span>
          </div>
        </div>

        <div class="question-list">
          <el-scrollbar height="calc(100vh - 240px)">
            <div v-for="(question, index) in examData.questions" :key="index" class="question-nav-item" :class="{
              'current': currentQuestionIndex === index,
              'answered': answers[index] && (Array.isArray(answers[index]) ? answers[index].length > 0 : answers[index].trim() !== ''),
              'unanswered': !answers[index] || (Array.isArray(answers[index]) ? answers[index].length === 0 : answers[index].trim() === '')
            }" @click="jumpToQuestion(index)">
              <div class="question-number">{{ index + 1 }}</div>
              <div class="question-info">
                <div class="question-type">{{ getQuestionTypeText(question.type) }}</div>
                <div class="question-score">{{ getQuestionScore(question) }}分</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </aside>

      <!-- 右侧题目内容 -->
      <main class="question-content">
        <!-- 显示考试结果 -->
        <div v-if="showResult" class="exam-result">
          <h2>考试成绩：{{ totalScore }}分</h2>
          <div class="question-result">
            <table>
              <thead>
                <tr>
                  <th>题目</th>
                  <th>得分</th>
                  <th>正确答案</th>
                  <th>你的答案</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(q, index) in examData.questions" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ scorePerQuestion[index] || 0 }}分</td>
                  <td>{{ getCorrectAnswer(q) }}</td>
                  <td>{{ getUserAnswer(q, index) }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <el-button type="primary" @click="backToList">返回考试列表</el-button>
        </div>
        <!-- 考试题内容 -->
        <el-card v-else-if="currentQuestion" class="question-card">
          <template #header>
            <div class="card-header">
              <div class="question-header-info">
                <span class="question-number-tag">题目 {{ currentQuestionIndex + 1 }}</span>
                <el-tag :type="getQuestionTypeTagColor(currentQuestion.type)" effect="light">
                  {{ getQuestionTypeText(currentQuestion.type) }}
                </el-tag>
                <span class="question-score-tag">{{ getQuestionScore(currentQuestion) }}分</span>
              </div>
              <el-pagination small :pager-count="5" layout="prev, pager, next" :total="examData.questions.length"
                :current-page="currentQuestionIndex + 1" :page-size="1" @current-change="handlePageChange"
                hide-on-single-page />
            </div>
          </template>

          <div class="question-body" ref="currentQuestionElement">
            <div class="question-stem">
              {{ currentQuestion.title }}
            </div>

            <!-- 单选题 -->
            <div v-if="currentQuestion.type === 'single'" class="options">
              <el-radio-group v-model="answers[currentQuestionIndex]" size="large">
                <el-radio v-for="(option, oIndex) in currentQuestion.options" :key="oIndex" :label="option.content"
                  border class="option-item">
                  <div class="option-content">
                    <span class="option-letter">{{ String.fromCharCode(65 + oIndex) }}</span>
                    <span class="option-text">{{ option.content }}</span>
                  </div>
                </el-radio>
              </el-radio-group>
            </div>

            <!-- 多选题 -->
            <div v-else-if="currentQuestion.type === 'multiple'" class="options">
              <el-checkbox-group v-model="answers[currentQuestionIndex]" size="large">
                <el-checkbox v-for="(option, oIndex) in currentQuestion.options" :key="oIndex" :label="option.content"
                  border class="option-item">
                  <div class="option-content">
                    <span class="option-letter">{{ String.fromCharCode(65 + oIndex) }}</span>
                    <span class="option-text">{{ option.content }}</span>
                  </div>
                </el-checkbox>
              </el-checkbox-group>
            </div>

            <!-- 填空题 -->
            <div v-else-if="currentQuestion.type === 'fill'" class="fill-blank-container">
              <el-input v-model="answers[currentQuestionIndex]" type="textarea" :rows="4" placeholder="请在此输入您的答案..."
                resize="none" class="fill-blank-input" />
            </div>

            <!-- 计算题 -->
            <div v-else-if="currentQuestion.type === 'calculation'" class="calculation-container">
              <el-input v-model="answers[currentQuestionIndex]" type="textarea" :rows="4" placeholder="请在此输入您的答案..."
                resize="none" class="fill-blank-input" />
            </div>

            <div class="question-description" v-if="examData.description">
              <el-alert type="info" :closable="false">
                {{ examData.description }}
              </el-alert>
            </div>
          </div>

          <div class="question-actions">
            <el-button :disabled="currentQuestionIndex === 0" @click="prevQuestion" type="info" plain>
              <el-icon><arrow-left /></el-icon> 上一题
            </el-button>

            <el-button type="primary" @click="markAndNext"
              :disabled="currentQuestionIndex === examData.questions.length - 1">
              下一题 <el-icon><arrow-right /></el-icon>
            </el-button>
          </div>
        </el-card>
      </main>
    </div>

    <!-- 考试信息提示 -->
    <el-drawer v-model="infoDrawerVisible" title="考试须知" direction="rtl" size="30%">
      <div class="exam-info">
        <h3>{{ examData.name }}</h3>
        <div class="info-item">
          <strong>考试时长：</strong> {{ examData.duration }} 分钟
        </div>
        <div class="info-item">
          <strong>总题目数：</strong> {{ examData.questions.length }} 题
        </div>
        <div class="info-item">
          <strong>考试说明：</strong> {{ examData.description }}
        </div>
        <div class="info-tips">
          <el-alert type="warning" title="注意事项" :closable="false">
            <ul>
              <li>请在规定时间内完成所有题目</li>
              <li>离开考试页面可能会被记录</li>
              <li>答题完成后请点击"交卷"按钮提交</li>
              <li>时间结束后系统将自动提交试卷</li>
            </ul>
          </el-alert>
        </div>
      </div>
    </el-drawer>

    <!-- 退出考试确认 -->
    <el-dialog v-model="exitConfirmVisible" title="确认离开" width="30%">
      <span>离开考试页面将视为主动交卷，确定要离开吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exitConfirmVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmExit">确认离开</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  computed,
  onMounted,
  onUnmounted,
  onBeforeUnmount,
} from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { studentApi } from '@/api/studentApi';
import router from '@/router';

export default defineComponent({
  setup() {
    // 考试数据
    const examData = reactive({
      name: '',
      duration: 0,
      description: '',
      questions: [] as any[]
    })

    // 获取传入的考试数据
    const getExamData = () => {
      const examInfo = sessionStorage.getItem('currentExam');
      if (examInfo) {
        const exam = JSON.parse(examInfo);
        examData.name = exam.name;
        examData.duration = Math.round((new Date(exam.endTime).getTime() - new Date(exam.startTime).getTime()) / 60000);
        examData.description = exam.description;
        examData.questions = JSON.parse(exam.questions).map((q: any) => {
          return {
            id: q.id,
            title: q.content,
            type: q.type,
            score: q.score,
            answer: q.answer,
            blanks: q.blanks,
            options: q.type === 'single' || q.type === 'multiple' ? JSON.parse(q.options || '[]') : null,
          };
        });
      }
      console.log(examData);
    };

    getExamData()

    // 答题状态管理
    const answers = reactive(examData.questions.map((q) => {
      if (q.type === 'multiple') {
        return [];
      }
      return '';
    })); // 初始化答案数组
    const currentQuestionIndex = ref(0)
    const currentQuestionElement = ref(null);
    const infoDrawerVisible = ref(true);
    const exitConfirmVisible = ref(false);
    const showResult = ref(false); // 是否显示结果
    const totalScore = ref(0); // 总分
    const scorePerQuestion = ref([] as number[]); // 每题得分

    // 计算当前问题
    const currentQuestion = computed(() => {
      return examData.questions[currentQuestionIndex.value];
    });

    // 考试倒计时
    const remainingTime = ref(examData.duration * 60);
    const timer = ref<number | null>(null);

    const formattedTime = computed(() => {
      const hours = Math.floor(remainingTime.value / 3600);
      const minutes = Math.floor((remainingTime.value % 3600) / 60);
      const seconds = remainingTime.value % 60;

      if (hours > 0) {
        return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      }
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    });

    // 计算完成题目数量
    const completedCount = computed(() => {
      return answers.reduce((count, answer, index) => {
        const question = examData.questions[index];
        if (question.type === 'multiple') {
          return count + (Array.isArray(answer) && answer.length > 0 ? 1 : 0);
        }
        return count + (answer && answer.trim() !== '' ? 1 : 0);
      }, 0);
    });

    // 计算进度百分比
    const progressPercentage = computed(() => {
      return Math.floor((completedCount.value / examData.questions.length) * 100);
    });

    // 进度条颜色
    const progressColor = computed(() => {
      const percentage = progressPercentage.value;
      if (percentage < 30) return '#f56c6c';
      if (percentage < 70) return '#e6a23c';
      return '#67c23a';
    });

    // 翻页处理
    const handlePageChange = (page: number) => {
      currentQuestionIndex.value = page - 1;
    };

    // 题目导航
    const jumpToQuestion = (index: number) => {
      currentQuestionIndex.value = index;
    };

    // 上一题处理
    const prevQuestion = () => {
      if (currentQuestionIndex.value > 0) {
        currentQuestionIndex.value--;
      }
    };

    // 下一题处理
    const nextQuestion = () => {
      if (currentQuestionIndex.value < examData.questions.length - 1) {
        currentQuestionIndex.value++;
      }
    };

    // 标记并前进
    const markAndNext = () => {
      // 检查是否已选择/填写答案
      const currentQuestion = examData.questions[currentQuestionIndex.value];
      let isAnswered = false;

      if (currentQuestion.type === 'single' || currentQuestion.type === 'multiple') {
        isAnswered = answers[currentQuestionIndex.value] ? true : false;
      } else if (currentQuestion.type === 'fill' || currentQuestion.type === 'calculation') {
        const trimmedAnswer = answers[currentQuestionIndex.value]?.trim();
        isAnswered = trimmedAnswer ? true : false;
      }

      if (!isAnswered) {
        ElMessage.warning('请先完成当前题目！');
        return;
      }

      nextQuestion();
    };

    // 定时器
    const startTimer = () => {
      timer.value = window.setInterval(() => {
        if (remainingTime.value > 0) {
          remainingTime.value--;
        } else {
          handleAutoSubmit();
        }
      }, 1000);
    };

    // 自动提交
    const handleAutoSubmit = () => {
      if (timer.value) {
        clearInterval(timer.value);
      }
      ElMessageBox.confirm('考试时间已结束，将自动提交试卷', '提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning',
      }).then(() => {
        submitAnswers();
      });
    };

    // 提交答案
    const submitAnswers = () => {
      if (!examData.questions || examData.questions.length === 0) return;

      totalScore.value = 0;
      scorePerQuestion.value = [];
      let wrongQuestions = []; // 用于存储答错的题目

      examData.questions.forEach((q, index) => {
        let isCorrect = false;
        let score = 0;

        if (q.type === 'single' || q.type === 'multiple') {
          const correctAnswers = q.options
            ? q.options.filter((opt) => opt.isCorrect).map((opt) => opt.content)
            : [];

          if (q.type === 'single') {
            isCorrect = answers[index] === correctAnswers[0];
          } else if (q.type === 'multiple') {
            const userAnswers = answers[index];
            isCorrect = Array.isArray(userAnswers) &&
              JSON.stringify(userAnswers.sort()) === JSON.stringify(correctAnswers.sort());
          }
          if (isCorrect) {
            score = q.score;
          }
        } else if (q.type === 'fill') {
          let correctAnswer = '';
          try {
            const blanks = JSON.parse(q.blanks || '[]');
            if (Array.isArray(blanks) && blanks.length > 0) {
              correctAnswer = blanks[0].answer || blanks[0];
            } else {
              correctAnswer = blanks.answer || blanks;
            }
            isCorrect = answers[index] === correctAnswer;
            if (isCorrect) {
              score = q.score;
            }
          } catch (error) {
            console.error('填空题答案解析错误:', error);
          }
        } else if (q.type === 'calculation') {
          try {
            const correctAnswer = JSON.parse(q.answer || '{}').answer;
            isCorrect = answers[index] === correctAnswer;
            if (isCorrect) {
              score = q.score;
            }
          } catch (error) {
            console.error('计算题答案解析错误:', error);
          }
        }

        scorePerQuestion.value.push(score);
        totalScore.value += score;

        // 如果答错，将题目信息加入错题列表
        if (!isCorrect) {
          const wrongQuestion = {
            questionId: q.id,
            userAnswer: Array.isArray(answers[index]) ? JSON.stringify(answers[index]) : answers[index],
            correctAnswer: q.answer || "",
            content: q.title || "",
            options: q.options ? JSON.stringify(q.options) : null,
            blanks: q.blanks ? JSON.stringify(q.blanks) : null,
            answer: q.answer ? JSON.stringify(q.answer) : null,
            explanation: q.explanation,
            type: q.type,
            category: q.category,
            difficulty: q.difficulty,
            score: q.score
          };
          wrongQuestions.push(wrongQuestion);
        }
      });

      // 获取当前考试ID和学生ID
      const currentExamId = JSON.parse(sessionStorage.getItem('currentExam') || '{}').id;
      const studentInfo = JSON.parse(sessionStorage.getItem('currentStudent') || '{}');
      const studentId = studentInfo.id || 1;

      // 保存成绩到后端
      saveGradeToBackend(totalScore.value, currentExamId);

      // 保存错题到后端
      saveWrongQuestionsToBackend(studentId, currentExamId, wrongQuestions);

      // 显示考试结果
      showResult.value = true;
    };

    // 保存成绩到后端
    const saveGradeToBackend = async (score, examId) => {
      try {
        const studentInfo = JSON.parse(sessionStorage.getItem('currentStudent') || '{}');
        const studentId = studentInfo.id || 1;
        const examInfo = JSON.parse(sessionStorage.getItem('currentExam') || '{}');
        const subject = examInfo.category || '未知课程';
        const semester = examInfo.semester || '2024-2025学年第一学期';

        const gradeData = {
          studentid: studentId,
          subject: subject,
          score: score,
          semester: semester
        };

        const response = await studentApi.saveGrades(gradeData, examId);
        if (response.code === 200) {
          console.log('成绩保存成功:', response.data);
        } else {
          console.error('成绩保存失败:', response.msg);
        }
      } catch (error) {
        console.error('成绩保存失败:', error);
        ElMessage.error('成绩保存失败，请联系管理员');
      }
    };

    // 保存错题到后端
    const saveWrongQuestionsToBackend = async (studentId, examId, wrongQuestions) => {
      try {
        const formattedWrongQuestions = wrongQuestions.map(wq => {
          return {
            ...wq,
            blanks: typeof wq.blanks === 'object' ? JSON.stringify(wq.blanks) : wq.blanks,
            options: typeof wq.options === 'object' ? JSON.stringify(wq.options) : wq.options
          };
        });

        const response = await studentApi.saveWrongQuestions(studentId, examId, formattedWrongQuestions);
        if (response.code === 200) {
          console.log('错题保存成功:', response.data);
        } else {
          console.error('错题保存失败:', response.msg);
        }
      } catch (error) {
        console.error('错题保存失败:', error);
        ElMessage.error('错题保存失败，请联系管理员');
      }
    };
    // 提交处理
    const handleSubmit = () => {
      ElMessageBox.confirm(
        `您已完成 ${completedCount.value}/${examData.questions.length} 题，确认提交试卷吗？`,
        '提交确认',
        {
          confirmButtonText: '确定提交',
          cancelButtonText: '继续答题',
          type: 'warning',
        }
      ).then(submitAnswers);
    };

    // 确认退出
    const confirmExit = () => {
      exitConfirmVisible.value = false;
      submitAnswers();
    };

    // 获取题型文本
    const getQuestionTypeText = (type: string) => {
      const typeTextMap: { [key: string]: string } = {
        'single': '单选题',
        'multiple': '多选题',
        'fill': '填空题',
        'calculation': '计算题',
        'judgment': '判断题'
      }
      return typeTextMap[type] || type
    }

    // 获取题型标签颜色
    const getQuestionTypeTagColor = (type: string) => {
      const typeColors: { [key: string]: string } = {
        'single': 'primary',
        'multiple': 'success',
        'fill': 'warning',
        'calculation': 'info',
        'judgment': 'danger'
      }
      return typeColors[type] || 'info'
    }

    // 获取题目分数
    const getQuestionScore = (q: any) => q.score || 5

    // 获取正确答案
    const getCorrectAnswer = (q: any) => {
      if (q.type === 'single' || q.type === 'multiple') {
        const correctOptions = q.options ? q.options.filter(opt => opt.isCorrect).map(opt => opt.content) : [];
        return correctOptions.join(', ');
      } else if (q.type === 'fill') {
        try {
          const blanks = JSON.parse(q.blanks || '[]');
          return blanks[0].answer || blanks[0];
        } catch (error) {
          return '';
        }
      } else if (q.type === 'calculation') {
        try {
          return JSON.parse(q.answer || '{}').answer;
        } catch (error) {
          return '';
        }
      }
      return '';
    };

    // 获取用户答案
    const getUserAnswer = (q: any, index: number) => {
      if (q.type === 'single' || q.type === 'multiple') {
        const userAnswer = answers[index];
        if (Array.isArray(userAnswer)) {
          return userAnswer.join(', ');
        }
        return userAnswer;
      } else if (q.type === 'fill') {
        return answers[index];
      } else if (q.type === 'calculation') {
        return answers[index];
      }
      return '';
    };

    // 返回考试列表
    const backToList = () => {
      router.push('/student/ExamList');
    };

    // 生命周期钩子
    onMounted(() => {
      startTimer();

      // 自动关闭信息抽屉
      setTimeout(() => {
        infoDrawerVisible.value = false;
      }, 3000);
    });

    onBeforeUnmount(() => {
      exitConfirmVisible.value = true;
    });

    onUnmounted(() => {
      if (timer.value) {
        clearInterval(timer.value);
      }
    });

    return {
      examData,
      answers,
      currentQuestionIndex,
      currentQuestion,
      currentQuestionElement,
      infoDrawerVisible,
      exitConfirmVisible,
      showResult,
      totalScore,
      scorePerQuestion,
      formattedTime,
      completedCount,
      progressPercentage,
      progressColor,
      jumpToQuestion,
      prevQuestion,
      nextQuestion,
      markAndNext,
      handleSubmit,
      handlePageChange,
      confirmExit,
      getQuestionTypeText,
      getQuestionTypeTagColor,
      getQuestionScore,
      getCorrectAnswer,
      getUserAnswer,
      backToList
    }
  }
})
</script>

<style scoped>
.exam-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
  overflow: hidden;
}

/* 顶部导航栏 */
.exam-header {
  background-color: #fff;
  padding: 16px 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.exam-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.timer-badge {
  display: flex;
  align-items: center;
  background-color: #f56c6c;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 600;
}

.timer-badge .el-icon {
  margin-right: 8px;
}

.exam-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-info {
  flex: 1;
  margin-right: 24px;
}

.progress-info span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.submit-exam-btn {
  padding: 12px 24px;
  font-size: 16px;
}

/* 主要内容区域 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 左侧导航栏 */
.question-sidebar {
  width: 260px;
  background-color: #fff;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.sidebar-header h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #303133;
}

.sidebar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  color: #606266;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 4px;
}

.legend-color.current {
  background-color: #409eff;
}

.legend-color.answered {
  background-color: #67c23a;
}

.legend-color.unanswered {
  background-color: #909399;
}

.question-list {
  flex: 1;
  overflow: hidden;
}

.question-nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.3s;
}

.question-nav-item:hover {
  background-color: #f5f7fa;
}

.question-nav-item.current {
  background-color: #ecf5ff;
  border-left: 4px solid #409eff;
}

.question-nav-item.answered {
  border-left: 4px solid #67c23a;
}

.question-nav-item.unanswered {
  border-left: 4px solid #909399;
}

.question-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  margin-right: 12px;
}

.current .question-number {
  background-color: #409eff;
  color: white;
}

.answered .question-number {
  background-color: #67c23a;
  color: white;
}

.question-info {
  flex: 1;
}

.question-type {
  font-size: 14px;
  margin-bottom: 4px;
  color: #303133;
}

.question-score {
  font-size: 12px;
  color: #909399;
}

/* 右侧内容区域 */
.question-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.question-card {
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.question-number-tag {
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}

.question-score-tag {
  color: #f56c6c;
  font-weight: 500;
}

.question-body {
  padding: 20px 0;
}

.question-stem {
  font-size: 16px;
  line-height: 1.8;
  color: #303133;
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.option-content {
  display: flex;
  align-items: center;
}

.option-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ecf5ff;
  color: #409eff;
  font-weight: 600;
  margin-right: 12px;
}

.option-text {
  flex: 1;
}

.fill-blank-container,
.judgment-container {
  margin-bottom: 24px;
}

.fill-blank-input {
  width: 100%;
}

.judgment-btn {
  width: 120px;
}

.judgment-btn .el-icon {
  margin-right: 8px;
}

.question-description {
  margin-top: 24px;
}

.question-actions {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

/* 考试结果 */
.exam-result {
  text-align: center;
  margin-top: 20px;
}

.exam-result h2 {
  color: #67c23a;
  font-size: 24px;
}

.question-result {
  margin-top: 20px;
  text-align: left;
}

.question-result table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.question-result th,
.question-result td {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
  text-align: left;
}

.question-result th {
  background-color: #f5f7fa;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .question-sidebar {
    width: 100%;
    height: auto;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid #e4e7ed;
  }

  .question-list {
    height: 150px;
  }

  .question-nav-item {
    padding: 8px 12px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>
